<template>
  <div>
    <div class="top">
      <span>人员列表</span>
      <van-button icon="plus" type="info" size="small" @click="add"
        >新增</van-button
      >
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="card-list">
        <li v-for="(item, index) in list" :key="index">
          <div class="card-head">
            <van-icon name="user-o" />
            {{ item.userName }}
            <van-popover
              v-model="item.showPopover"
              theme="dark"
              trigger="click"
              :actions="item.actions"
              @select="onSelect"
              class="operate"
              placement="bottom-end"
            >
              <template #reference>
                <van-icon name="ellipsis" />
              </template>
            </van-popover>
          </div>
          <div class="card-content">
            <div class="item-con">
              <label>门店名称：</label>
              <span>{{ item.shopName }}</span>
            </div>
            <div class="item-con">
              <label>手机号码：</label>
              <span>{{ item.phone }}</span>
            </div>
            <div class="item-con">
              <label>添加时间：</label>
              <span>{{ item.createAt }}</span>
            </div>
            <div class="data-show">
              <div>
                <span>总佣金：</span>
                <p>{{ item.totalBrokerage }}</p>
              </div>
              <div>
                <span>本月佣金：</span>
                <p>{{ item.monthBrokerage }}</p>
              </div>
              <div>
                <span>今日佣金：</span>
                <p>{{ item.dayBrokerage }}</p>
              </div>
            </div>
          </div>
          <div class="card-bottom" @click="getQRcode(item.userId)">生成二维码</div>
        </li>
      </ul>
    </van-list>
  </div>
</template>
<script>
import { Dialog } from 'vant'
import { getShopUserListByPage, deleteUser } from '../service/service.js'
export default {
  name: 'ShopAssistant',
  data () {
    return {
      showPopover: false,
      actIndex: 0,
      actions: [
        { text: '修改', icon: require('@/assets/images/icon_del.png') },
        { text: '删除', icon: require('@/assets/images/icon_deit.png') }
      ],
      list: [],
      loading: false,
      finished: false,
      pageNo: 1,
      pageSize: 10,
      totalCount: ''
    }
  },
  created () {
    // this.getlist()
  },
  methods: {
    getlist () {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getShopUserListByPage(params)
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }

          this.totalCount = Math.ceil(data.data.totalCount / this.pageSize)
          const datas = data.data.userList.map((item) => {
            item.showPopover = false
            item.actions = [
              {
                text: '修改',
                icon: require('@/assets/images/icon_deit.png'),
                userId: item.userId,
                userName: item.userName,
                phone: item.phone
              },
              {
                text: '删除',
                icon: require('@/assets/images/icon_del.png'),
                userId: item.userId,
                userName: item.userName,
                phone: item.phone
              }
            ]
            return item
          })
          this.list = [...this.list, ...datas]

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.pageNo >= this.totalCount) {
            this.finished = true
            return
          }
          this.pageNo++
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onLoad () {
      this.getlist()
    },
    add () {
      this.$router.push({
        path: '/admin/shopAssistant-add',
        query: { isAdd: '1' }
      })
    },
    getQRcode (id) {
      this.$router.push({
        path: '/admin/shopAssistant-QRcode',
        query: { userId: id }
      })
    },
    onSelect (action) {
      console.log(action)

      if (action.text === '删除') {
        Dialog.confirm({
          title: '提示',
          message: '确定要删除此营业人员吗？',
          confirmButtonText: '删除'
        })
          .then(() => {
            console.log({ shopUserId: action.userId })
            deleteUser({ shopUserId: action.userId })
              .then((res) => {
                const data = res.data
                if (data.ret !== 0) {
                  this.$toast(data.msg)
                  return false
                }
                this.$toast(data.msg)
                this.list.forEach((element, index) => {
                  if (element.userId === action.userId) {
                    this.list.splice(index, 1)
                  }
                })
              })
              .catch((err) => {
                console.log(err)
              })
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.$router.push({
          path: '/admin/shopAssistant-add',
          query: {
            userId: action.userId,
            userName: action.userName,
            phone: action.phone,
            isAdd: '0'

          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  padding: 10px 15px 15px;
  display: flex;
  justify-content: space-between;
}
.card-list {
  li {
    margin: 0 15px 15px;
  }
  .card-head {
    height: 40px;
    background: #3380c7;
    color: #fff;
    line-height: 40px;
    border-radius: 4px 4px 0px 0px;
    padding-left: 15px;
    .operate {
      float: right;
      line-height: 40px;
      width: 40px;
      padding: 0 15px;
    }
  }
  .card-content {
    background: #fff;
    padding: 0 15px;
    .item-con {
      line-height: 34px;
      font-size: 14px;
      color: #666;
       >label{
        width: 80px;
      }
      span{
        flex: 1;
      }
    }
    .data-show {
      margin-top: 8px;
      border-top: 1px solid #dadee3;
      padding: 10px 0;
      display: flex;
      justify-content: space-around;
      div {
        span {
          font-size: 13px;
          color: #999999;
        }
        p {
          font-size: 18px;
          color: #333;
          margin-top: 6px;
          font-weight: 700;
        }
      }
    }
  }

  .card-bottom {
    height: 40px;
    background: #f4f8fe;
    border-radius: 0px 0px 4px 4px;
    line-height: 40px;
    text-align: center;
    color: #2381f1;
  }
}
</style>
